<template>
  <div class="team"v-infinite-scroll="loadMore"
       infinite-scroll-disabled="loading"
       infinite-scroll-distance="10">
    <div data-v-683a3314="" class="scrollerTop">
      <div data-v-683a3314="" class="vip-search">
        <div data-v-683a3314="">
          搜索商品名称
          <i class="el-icon-search"style="float: right;font-size: 20px;"></i>
        </div>
      </div>
      <div data-v-683a3314="" class="team-list"style="">
        <div data-v-683a3314="" class="team-list-ul">
          <a data-v-683a3314="" :class="{ active: isActive === index }" v-for="(item,index) in title"@click="tit(index)">{{item.category_name}}<i data-v-683a3314=""></i></a>
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 107px;"></div>
    <!-- 轮播 -->
    <div class="common-form"style="margin-top: 5px;">
      <div class="banner" style="height: 159px;">
        <!--<img src="../../assets/banner.png" alt="" width="100%;"/>-->
        <!-- Swiper -->
        <div class="swiper-container"style="height: 100%;overflow: hidden;position: relative;">
          <div class="swiper-wrapper" style="height: 100%;">
            <div style="width: 100%;height: 100%;"v-show="carouselFigure==''">
              <img :src="thome" alt="惠万众"width="100%"height="100%">
            </div>
            <div class="swiper-slide" v-for="(item,index) in carouselFigure"v-show="carouselFigure!=''" style="width: 100%;height: 100%;position: relative;overflow: hidden;"@click="cart(index)">
              <img :src="imgTitl+item.img"width=""height=""style="border-radius: 5px; position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 公共标题 -->
    <div class="common-tel">
      今日比拼
      <div class="common-tel-dot"style="opacity: 0;">
        <em></em>
        <em></em>
        <em></em>
      </div>
      <a href="#"style="display: none;">更多<i>&gt;</i></a>
    </div>
    <!-- 今日必拼 -->

    <div class="team-spell">
      <div style="width: 100%;height: 174px;margin-top: 10px;">
        <!--<div style="width: auto;height: 100%;display: flex;overflow: auto">-->
          <!--<div class=""style="width: 112.8px;height: 100%;margin: 5px;"v-for="(item,index) in todayList" @click="today(index)"v-if="item.goods_status == 0">-->
            <!--<div class="team-spell-goods"style="width: 112.8px;background: #FFF;overflow: hidden;margin: 0;padding: 0;">-->
              <!--<img :src="imgTitl+item.thumbnail":alt="item.goods_title"width="100%"height="100%"style="overflow: hidden;"/>-->
              <!--<p>{{item.goods_title}}</p>-->
              <!--<p>￥ <em>{{item.market_price}}</em></p>-->
              <!--<p>&lt;!&ndash;已拼234件 &ndash;&gt;<em>{{item.gti_team_people_num}}人团</em></p>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->

        <!-- Swiper -->
        <div class="swiper-container"style="width: 100%;height: 100%;">
          <div class="swiper-wrapper"style="width: 100%;height: 100%;">
            <div class="swiper-slide":style="todayList.length != 3?disP:disP2"v-show="todayList1.length != ''">
              <div class=""style="width: 110.8px;height: 100%;"v-for="(item,index) in todayList1" @click="today1(index)">
                <div class="team-spell-goods"style="width: 100%;background: #FFF;overflow: hidden;margin: 0;padding: 0;">
                  <img :src="imgTitl+item.thumbnail":alt="item.goods_title"width="100%"height="100%"style="overflow: hidden;height: 110.8px;"/>
                  <p>{{item.goods_title}}</p>
                  <p>￥<em>{{item.gti_price*100/100}}</em>&nbsp;&nbsp;&nbsp;<del style="color: silver;">￥{{item.market_price*100/100}}</del></p>
                  <p><!--已拼234件 --><em>{{item.gti_team_people_num}}人团</em></p>
                </div>
              </div>
            </div>
            <div class="swiper-slide"style="display: flex;justify-content: space-between;"v-show="todayList2.length != ''">
              <div class="" :style="todayList.length != 3?disP:disP2"v-for="(item,index) in todayList2" @click="today2(index)">
                <div class="team-spell-goods"style="width: 110.8px;background: #FFF;overflow: hidden;margin: 0;padding: 0;">
                  <img :src="imgTitl+item.thumbnail":alt="item.goods_title"width="100%"height="100%"style="overflow: hidden;height: 110.8px;"/>
                  <p>{{item.goods_title}}</p>
                  <p>￥<em>{{item.gti_price*100/100}}</em>&nbsp;&nbsp;&nbsp;<del style="color: silver;">￥{{item.market_price*100/100}}</del></p>
                  <p><!--已拼234件 --><em>{{item.gti_team_people_num}}人团</em></p>
                </div>
              </div>
            </div>
            <div class="swiper-slide" :style="todayList.length != 3?disP:disP2"v-show="todayList3.length != ''">
              <div class=""style="width: 110.8px;height: 100%;"v-for="(item,index) in todayList3" @click="today3(index)">
                <div class="team-spell-goods"style="width: 100%;background: #FFF;overflow: hidden;margin: 0;padding: 0;">
                  <img :src="imgTitl+item.thumbnail":alt="item.goods_title"width="100%"height="100%"style="overflow: hidden;height: 110.8px;"/>
                  <p>{{item.goods_title}}</p>
                  <p>￥<em>{{item.gti_price*100/100}}</em>&nbsp;&nbsp;&nbsp;<del style="color: silver;">￥{{item.market_price*100/100}}</del></p>
                  <p><!--已拼234件 --><em>{{item.gti_team_people_num}}人团</em></p>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- 公共标题 -->
    <div class="common-tel"style="margin-bottom: 1%;margin-top:3%;"v-show="goodList!=''">
      每日上新
      <div class="common-tel-dot">
        <!--<em></em>-->
        <!--<em></em>-->
        <!--<em></em>-->
      </div>
    </div>
    <!-- 每日上新 -->
    <div style="margin-top: 15px;display:flex;width: 94%;height: 83px;"v-for="(item,index) in goodList"@click="good(index)">
      <div style="width: 118px;height: 83px;background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551523823558&di=178472899c7d6968378d9c4e6655b65c&imgtype=0&src=http%3A%2F%2Fp5.qhimg.com%2Ft012be171115495ffb2.gif);background-size:cover;border-radius: 5px 0 0 5px;margin: 0 10px 0 10px;overflow: hidden;">
        <img :src="imgTitl+item.thumbnail" :alt="item.goods_title"width="100%"height="100%"style="overflow:hidden;font-size: 12px;">
      </div>
      <div style="width: 100%;">
        <p style=" text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
font-weight: bold;
font-size: 14px;
margin-bottom: 10px;margin-top: 10px;">
          {{item.goods_title}}
        </p>
        <p style="display: none;">
          <span style="color:rgba(153, 153, 153, 1);font-size: 12px;">已拼</span> <span style="color:rgba(254, 39, 70, 1);font-size: 12px;">1452</span><span style="color:rgba(153, 153, 153, 1);font-size: 12px;">件</span>
        </p>
        <div style="display: flex;justify-content: space-between;">
          <div>
            <span style="font-size: 12px;line-height: 30px;">￥</span><span style="font-size: 12px;font-weight: bold;color:rgba(254, 39, 70, 1);line-height: 30px;">{{item.gti_price}}</span><span style="font-size: 12px;color:rgba(153, 153, 153, 1);line-height: 30px;margin-left: 10px;"><del style="">￥{{item.market_price}}</del></span>
          </div>
          <div>
            <span style="display: block;width: 70px;height: 30px;background-color: rgba(254, 39, 70, 1);border-radius: 46px;color: white;text-align: center;line-height: 30px;font-size: 12px;">{{item.isTeaming == 1?'正在开团':'马上开团'}}</span>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 65px;">&nbsp;</div>
    <div style="display: block;">
      <p class="el-icon-loading"style="font-size: 24px;text-align: center;width: 100%;"v-show="loading"></p>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import Footer from '../Footer/Footer'
  import Swiper from 'swiper'
  import '../../../node_modules/swiper/dist/css/swiper.min.css'
  import { InfiniteScroll } from 'mint-ui';
  import { Toast } from 'mint-ui';
  import element from 'element-ui'
  import { Loading } from 'element-ui';

  export default {
    name: 'AssemblePage',
    components: {Footer},
    data(){
      return{
        imgTitl:'http://39.96.76.3/HuiWanZhong/public/uploads/',
        thome:'http://api.huiwanzhong365.com/uploads/20190216/a946c8ef91d066d39e8b0363c03a66f4.jpg',
        title:[],
        carouselFigure:[],
        todayList:[],
        todayList1:[],
        todayList2:[],
        todayList3:[],
        goodList:[],
        page:'1',
        loading: false,
        total:'',
        isActive:-1,
        plechomer:[],
        loadingInstance:'',
        disP:{
          'display': 'flex',
          'justify-content': 'space-between',
        },
        disP2:{
          'display': 'flex',
          'justify-content': '',
        }
      }
    },
    created(){
      this.loadingInstance = Loading.service(this.options);
      // this.total = JSON.parse(sessionStorage.getItem('total'));
      this.title = JSON.parse(sessionStorage.getItem('title'));
      // this.todayList = JSON.parse(sessionStorage.getItem('todayList'));
      // this.goodList = JSON.parse(sessionStorage.getItem('goodList'));
      // this.today();
      // if (this.total == '' || this.title == '' || this.todayList == '' || this.goodList == ''){
      // }else {
      //   this.getData();
      // }
      // this.posman();
        this.getData();
        // if (this.todayList1.length)
    },
    mounted(){
      var swiper = new Swiper('.swiper-container',{
        pagination : '.swiper-pagination',
        paginationClickable: true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      });
      var swiper2 = new Swiper('.swiper-container2',{
        pagination : '.swiper-pagination',
        paginationClickable: true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      });
    },
    methods:{
      getData(){
        this.loading = true;
        axios.get('http://39.96.76.3/HuiWanZhong/public/index.php/team/index/getTeamList', {
          params: {
            'page':this.page,
          },
        }).then(response =>{
          this.total = response.data.goodList.total;
          // this.todayList = this.todayList.concat(response.data.todayList.data);
          this.todayList = response.data.todayList;
          this.goodList = response.data.goodList.data;
          this.title = response.data.cate;
          console.log(this.title)
          this.page++;
          sessionStorage.setItem('total', JSON.stringify(response.data.goodList.total));
          sessionStorage.setItem('title', JSON.stringify(response.data.cate));
          sessionStorage.setItem('todayList', JSON.stringify(response.data.todayList.data));
          sessionStorage.setItem('goodList', JSON.stringify(response.data.goodList.data));

          let a = 9;
          let b = this.todayList.data.length;
          if (b == 1) {
            this.todayList1.push(response.data.todayList.data[0]);
          }else if (b ==  2){
            this.todayList1.push(response.data.todayList.data[0]);
            this.todayList1.push(response.data.todayList.data[1]);
          } else if (b == 3){
            this.todayList1.push(response.data.todayList.data[0]);
            this.todayList1.push(response.data.todayList.data[1]);
            this.todayList1.push(response.data.todayList.data[2]);
          }else if (b == 4){
            this.todayList1.push(response.data.todayList.data[0]);
            this.todayList1.push(response.data.todayList.data[1]);
            this.todayList1.push(response.data.todayList.data[2]);
            this.todayList2.push(response.data.todayList.data[3]);
          } else if (b == 5){
            this.todayList1.push(response.data.todayList.data[0]);
            this.todayList1.push(response.data.todayList.data[1]);
            this.todayList1.push(response.data.todayList.data[2]);
            this.todayList2.push(response.data.todayList.data[3]);
            this.todayList2.push(response.data.todayList.data[4]);
          } else if (b == 6){
            this.todayList1.push(response.data.todayList.data[0]);
            this.todayList1.push(response.data.todayList.data[1]);
            this.todayList1.push(response.data.todayList.data[2]);
            this.todayList2.push(response.data.todayList.data[3]);
            this.todayList2.push(response.data.todayList.data[4]);
            this.todayList2.push(response.data.todayList.data[5]);
          } else if (b == 7){
            this.todayList1.push(response.data.todayList.data[0]);
            this.todayList1.push(response.data.todayList.data[1]);
            this.todayList1.push(response.data.todayList.data[2]);
            this.todayList2.push(response.data.todayList.data[3]);
            this.todayList2.push(response.data.todayList.data[4]);
            this.todayList2.push(response.data.todayList.data[5]);
            this.todayList3.push(response.data.todayList.data[6]);
          } else if (b == 8){
            this.todayList1.push(response.data.todayList.data[0]);
            this.todayList1.push(response.data.todayList.data[1]);
            this.todayList1.push(response.data.todayList.data[2]);
            this.todayList2.push(response.data.todayList.data[3]);
            this.todayList2.push(response.data.todayList.data[4]);
            this.todayList2.push(response.data.todayList.data[5]);
            this.todayList3.push(response.data.todayList.data[6]);
            this.todayList3.push(response.data.todayList.data[7]);
          } else if (b == 9) {
            this.todayList1.push(response.data.todayList.data[0]);
            this.todayList1.push(response.data.todayList.data[1]);
            this.todayList1.push(response.data.todayList.data[2]);
            this.todayList2.push(response.data.todayList.data[3]);
            this.todayList2.push(response.data.todayList.data[4]);
            this.todayList2.push(response.data.todayList.data[5]);
            this.todayList3.push(response.data.todayList.data[6]);
            this.todayList3.push(response.data.todayList.data[7]);
            this.todayList3.push(response.data.todayList.data[8]);
          }else if (b > 9) {
            this.todayList1.push(response.data.todayList.data[0]);
            this.todayList1.push(response.data.todayList.data[1]);
            this.todayList1.push(response.data.todayList.data[2]);
            this.todayList2.push(response.data.todayList.data[3]);
            this.todayList2.push(response.data.todayList.data[4]);
            this.todayList2.push(response.data.todayList.data[5]);
            this.todayList3.push(response.data.todayList.data[6]);
            this.todayList3.push(response.data.todayList.data[7]);
            this.todayList3.push(response.data.todayList.data[8]);
          }

          // for (var i=0;i<this.goodList.length;i++){
          //
          //   axios.get('http://39.96.76.3/HuiWanZhong/public/index.php/task/index/_order_notice', {
          //     params: {
          //       goodId:this.goodList[i].id,
          //     },
          //   }).then(response =>{
          //     this.plechomer.push(response.data.data);
          //   }).catch(function (error) {
          //   });
          //
          // }

          this.loadingInstance.close();
          this.loading = false;
        }).catch(function (error) {
          console.log(error);
        });
      },

      today(){
        let b = this.todayList.length;
        if (b == 1) {
          this.todayList1.push(this.todayList[0]);
        }else if (b ==  2){
          this.todayList1.push(this.todayList[0]);
          this.todayList1.push(this.todayList[1]);
        } else if (b == 3){
          this.todayList1.push(this.todayList[0]);
          this.todayList1.push(this.todayList[1]);
          this.todayList1.push(this.todayList[2]);
        }else if (b == 4){
          this.todayList1.push(this.todayList[0]);
          this.todayList1.push(this.todayList[1]);
          this.todayList1.push(this.todayList[2]);
          this.todayList2.push(this.todayList[3]);
        } else if (b == 5){
          this.todayList1.push(this.todayList[0]);
          this.todayList1.push(this.todayList[1]);
          this.todayList1.push(this.todayList[2]);
          this.todayList2.push(this.todayList[3]);
          this.todayList2.push(this.todayList[4]);
        } else if (b == 6){
          this.todayList1.push(this.todayList[0]);
          this.todayList1.push(this.todayList[1]);
          this.todayList1.push(this.todayList[2]);
          this.todayList2.push(this.todayList[3]);
          this.todayList2.push(this.todayList[4]);
          this.todayList2.push(this.todayList[5]);
        } else if (b == 7){
          this.todayList1.push(this.todayList[0]);
          this.todayList1.push(this.todayList[1]);
          this.todayList1.push(this.todayList[2]);
          this.todayList2.push(this.todayList[3]);
          this.todayList2.push(this.todayList[4]);
          this.todayList2.push(this.todayList[5]);
          this.todayList3.push(this.todayList[6]);
        } else if (b == 8){
          this.todayList1.push(this.todayList[0]);
          this.todayList1.push(this.todayList[1]);
          this.todayList1.push(this.todayList[2]);
          this.todayList2.push(this.todayList[3]);
          this.todayList2.push(this.todayList[4]);
          this.todayList2.push(this.todayList[5]);
          this.todayList3.push(this.todayList[6]);
          this.todayList3.push(this.todayList[7]);
        } else if (b == 9) {
          this.todayList1.push(this.todayList[0]);
          this.todayList1.push(this.todayList[1]);
          this.todayList1.push(this.todayList[2]);
          this.todayList2.push(this.todayList[3]);
          this.todayList2.push(this.todayList[4]);
          this.todayList2.push(this.todayList[5]);
          this.todayList3.push(this.todayList[6]);
          this.todayList3.push(this.todayList[7]);
          this.todayList3.push(this.todayList[8]);
        }else if (b > 9) {
          this.todayList1.push(this.todayList[0]);
          this.todayList1.push(this.todayList[1]);
          this.todayList1.push(this.todayList[2]);
          this.todayList2.push(this.todayList[3]);
          this.todayList2.push(this.todayList[4]);
          this.todayList2.push(this.todayList[5]);
          this.todayList3.push(this.todayList[6]);
          this.todayList3.push(this.todayList[7]);
          this.todayList3.push(this.todayList[8]);
        }
      },

      tit(index){
        this.isActive = index;
        if (index != 0){
          axios.get('http://39.96.76.3/HuiWanZhong/public/index.php/team/index/getTeamList', {
            params: {
              'cateId':this.title[index].id,
            },
          }).then(response =>{
            this.total = response.data.goodList.total;
            this.todayList = response.data.todayList.data;
            this.goodList = response.data.goodList.data;
          }).catch(function (error) {
            console.log(error);
          });
        } else {
          // this.l();
        }
      },

      open(){
        axios.post('http://huiwanzhong.ay1.cc/vipmember/index/getList',qs.stringify({openid:'o1KIj0ydbQPihENeImso6zKWWrtI',goods_type:'2'})).then(re=>{
          this.title = re.data;
          console.log(re)
        });
      },

      today1(index){
        this.$router.push({name: 'AssembleDetails', params: {id:this.todayList1[index].id}});
      },

      today2(index){
        this.$router.push({name: 'AssembleDetails', params: {id:this.todayList2[index].id}});
      },

      today3(index){
        this.$router.push({name: 'AssembleDetails', params: {id:this.todayList3[index].id}});
      },

      good(index){
        // console.log(this.goodList[index].id);
        this.$router.push({name: 'AssembleDetails', params: {id:this.goodList[index].id}});
      },

      fication(){

      },

      cart(index){
        this.$router.push({name: 'AssembleDetails', params: {id:this.carouselFigure[index].id}});
      },

      getData2(){
        this.loading = true;
        axios.get('http://39.96.76.3/HuiWanZhong/public/index.php/team/index/getTeamList', {
          params: {
            'page':this.page,
          },
        }).then(response =>{
          this.goodList = this.goodList.concat(response.data.goodList.data);
          this.page++;
          this.loading = false;
        }).catch(function (error) {
          console.log(error);
        });
      },

      loadMore(){
        console.log(this.goodList.length,this.total);
        if (this.goodList.length != this.total){
          this.getData2()
        } else {
        }
      },

      posman(){
        setTimeout(()=>{
          // console.log(this.goodList)
          axios.get('http://39.96.76.3/HuiWanZhong/public/index.php/task/index/_order_notice', {
            params: {
              // goodId:this.info.id,
            },
          }).then(response =>{
            // console.log(response)
          }).catch(function (error) {
          });
        },1000)
      },
    },
  }
</script>

<style scoped>
  /*拼团首页*/
  .team-search{
    width:94%;
    margin:0 auto;
    background: #FE2746;
    border-radius: 20px;
  }
  .team-search div{
    color:#FFF;
    margin-top:15px;
    padding:8px 16px;
  }
  .team-search div i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../assets/sousuo.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: right;
  }
  .team-list{
    width: 100%;
    height: 28px;
    display: inline-block;
    overflow: auto;
  }
  .team-list-ul{
    width:1000px;
  }
  .team-list-ul a{
    width: 82px;
    text-align: center;
    display: inline-block;
    float: left;
    padding: 7px 0;
    color: #999;
  }
  .team-list-ul-pink{
    color:#FE2746 !important;
    position: relative;
  }
  .team-list-ul-pink i{
    width: 0;
    height: 0;
    position: absolute;
    bottom: -3px;
    left: 41%;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 6px solid red;
  }
  .team-spell{
    width:94%;
    margin:0 auto;
  }
  .team-spell-goods img{
    width:100%;
    height:112px;
  }
  .team-spell-goods{
    width: 32%;
    background: #FFF;
    float: left;
    border-radius: 5px;
    overflow: hidden;
    margin-top:10px;
    padding-bottom: 5px;
  }
  .team-spell a:nth-child(2){
    margin: 10px 2% 0;
  }
  .team-spell-goods p:nth-child(2){
    width:94%;
    margin:0 auto;
    font-size:12px;
    padding:2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
  }
  .team-spell-goods p:nth-child(3){
    font-size: 12px;
    color: #FE2746;
    width: 94%;
    margin: 0 auto;
  }
  .team-spell-goods p:nth-child(3) em {
    font-weight: 600;
    color:#FE2746;
  }
  .team-spell-goods p:nth-child(4){
    font-size:12px;
    width:94%;
    margin:5px auto;
    color:#999;
  }
  .team-spell-goods p:nth-child(4) em{
    font-size:12px;
    background-color: rgba(252, 40, 71, 0.07);
    color:#FC2847;
    float: right;
    padding:2px 5px;
    border-radius: 20px;
    margin-top: -3px;
  }
  .team-goods-img{
    width:31%;
    height:118px;
    float: left;
  }
  .team-goods{
    width:64%;
    float: left;
    margin-left: 2%;
  }
  .team-goods p:nth-child(1){
    margin-top:8px;
  }
  .team-goods p:nth-child(2){
    color:#999;
    font-size:12px;
    margin:5px 0;
  }
  .team-goods p:nth-child(2) em{
    color:#FC2847;
  }
  .team-goods p:nth-child(3){
    margin-top:16px;
  }
  .team-goods p:nth-child(3) em:nth-child(1){
    color:#FC2847;
  }
  .team-goods p:nth-child(3) em:nth-child(2){
    text-decoration: line-through;
    font-size: 12px;
    color: #999;
  }
  .team-goods p:nth-child(3) em:nth-child(3){
    line-height: 20px;
    border-radius: 46px;
    background-color: rgba(254, 39, 70, 1);
    font-size: 12px;
    color: #FFF;
    padding: 4px 8px;
    float: right;
    margin-right: 6px;
    margin-top: -8px;
  }
  input::placeholder{
    color: white;
  }
  .scrollerTop[data-v-683a3314] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #FFF;
    width: 100%;
  }
  .vip-search[data-v-683a3314] {
    width: 94%;
    margin: 0 auto;
    background: rgb(254, 39, 70);
    border-radius: 20px;
  }
  .vip-search div[data-v-683a3314] {
    color: #FFF;
    margin-top: 15px;
    padding: 8px 16px;
    margin-bottom: 15px;
  }
  .vip-search div i[data-v-683a3314] {
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(…8dS9wZMjxYCxQZL6fu/0nDXpoPHqBn4UeAnoaW/nzrLfAPCgaGQBRn8WsAAAAASUVORK5CYII=) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: right;
  }
  .team-list[data-v-683a3314] {
    width: 100%;
    height: 38px;
    display: inline-block;
    overflow: auto;
  }
  .team-list-ul[data-v-683a3314] {
    width: 1000px;
  }
  .team-list-ul a[data-v-683a3314] {
    width: 82px;
    text-align: center;
    display: inline-block;
    float: left;
    padding: 7px 0;
    color: #999;
  }
  .active{
    color:#FE2746 !important;
    font-weight: 600;
    background-color: #FFF !important;
    position: relative;
  }
  .active i {
    width: 0;
    height: 0;
    position: absolute;
    bottom: -3px;
    left: 41%;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 6px solid red;
  }
</style>
